import React from "react"
const Coupon = () => {
    // 返回
    const back = () => {
        React.navigate(-1)
    }
    const [couponList, setCouponList] = React.useState([])
    const [hasMore, setHasMore] = React.useState(true)
    const [page, setPage] = React.useState(1)
    const limit = 10
    let busid = React.Business.id ?? 0
    // 改变标签
    const [active, setActive] = React.useState("all")
    const changeTab = (e: any) => {
        setActive(e)
        onRefresh()
    }
    // 下拉刷新
    const onRefresh = async () => {
        setPage(1)
        setHasMore(true)
        setCouponList([])
        loadMore()
    }
    // 上拉加载
    const loadMore = async () => {
        let result = await React.HTTP.post("/business/coupon", { busid, page, limit,status:active })
        if (result.code == 1) {
            setHasMore(true)
            setPage(page + 1)
            setCouponList(couponList.concat(result.data))
        } else {
            setHasMore(false)
            return false
        }
    }


    return (
        <>
            <link rel="stylesheet" href="/assets/css/coupon.css" />
            <React.UI.NavBar onBack={back}>我的优惠券</React.UI.NavBar>
            {/* 标签页 */}
            <React.UI.Tabs activeKey={active} activeLineMode='full' onChange={changeTab}>
                <React.UI.Tabs.Tab title='全部' key='all' />
                <React.UI.Tabs.Tab title='未使用' key='1' />
                <React.UI.Tabs.Tab title='已使用' key='0' />
            </React.UI.Tabs>
            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="coupon_list">
                    {
                        couponList.map((item: any) =>
                            <div className="coupon_item" key={item.id}>
                                <div className="item_content">
                                    <a href="coupon-info.html">
                                        <div className="left">
                                            {item.coupon.rate}<span>折</span>
                                        </div>
                                        <div className="right">
                                            <div>{item.coupon.title}</div>
                                            <div>{"过期时间:"+item.coupon.endtime_text}</div>
                                        </div>
                                    </a>
                                </div>
                                <div className="item_btn">
                                {
                                item.status=="1"?
                                <React.UI.Button size="mini" color='primary'>去使用</React.UI.Button>
                                :
                                <React.UI.Button size="mini" disabled color='primary'>已使用</React.UI.Button>
                                }
                        
                                </div>
                            </div>)
                    }

                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}

export default Coupon